<template>
  <div class="editor-frame--workbench">
    <div class="editor-frame--workbench-handle">
      <q-button @click="getSchema">保存</q-button>
      <!-- <q-button @click="getJson" style="margin-left: 8px">获取json</q-button> -->
      <q-button @click="preview" style="margin-left: 8px">预览</q-button>
    </div>
    <q-container class="editor-frame--content">
      <q-aside>
        <NavMenu />
      </q-aside>
      <q-main class="editor-frame--workbench-content-panel">
        <Viewport />
      </q-main>
      <!-- <q-aside class="editor-frame--workbench-setter-panel"> -->
      <SetterPanel />
      <!-- </q-aside> -->
    </q-container>
  </div>
</template>

<script>
export default {
  name: 'Workbench',
};
</script>

<script setup>
import NavMenu from './nav-menu';
import Viewport from './viewport';
import SetterPanel from './setter-panel';
import assets from '@/designer/assets/components';
import setters from '@/designer/setters';
import {
  provide,
  shallowRef,
  getCurrentInstance,
  ref,
} from '@vue/composition-api';
import createEngine, { EngineContext } from '@/designer/shared/create-engine';
import DefaultJson from './default.json';
// import DefaultJson from '@/designer/renderer/components/defaultData.json';

// 引擎注册
const engine = shallowRef(null);
const initEngine = () => {
  engine.value = createEngine({
    assets,
    setters,
  });
  engine.value.document.setSchema(DefaultJson);
};
initEngine();
provide(EngineContext, engine);

const getSchema = () => {
  const schema = engine.value.document.getSchema();
  console.log('schema', schema);
};

const getJson = () => {
  console.log(engine.value.document.nodes);
};

const { proxy } = getCurrentInstance();
const preview = () => {
  const schema = engine.value.document.getSchema();
  proxy.$router.push({
    path: '/preview',
  });
  localStorage.setItem('schema', JSON.stringify(schema));
};
</script>

<style lang="scss" scoped>
.q-container {
  display: flex;
  height: 100%;
}
.editor-frame--workbench {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #f5f7ff;
}
.editor-frame--workbench-handle {
  padding: 12px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  border-bottom: solid 1px #e5e6eb;
  flex-shrink: 0;
}
.editor-frame--content {
  flex: auto;
  height: 0;
}
.q-aside {
  margin: 24px 0 24px 16px;
  width: 216px !important;
}
.editor-frame--workbench-content-panel {
  flex: 1;
  padding: 24px;
  width: 100%;
  display: flex;
  flex-direction: column;
}
</style>
